<template>
  <view class="health-check-in">
    <view class="content">
      {{ healthCheckIn.summary }}
    </view>
    <image :src="healthCheckIn.url"></image>
    <!-- <view class="required-task-list">
      <view class="title">必选打卡任务</view>
      <view class="task-list">
        <view class="list-item" v-for="task in requiredTaskList" :key="task.id">
          <task-card></task-card>
        </view>
      </view>
    </view> -->
    <!-- <view class="option-task-list">
      <view class="title">可选打卡任务</view>
      <view class="task-list">
        <view class="list-item" v-for="task in optionTaskList" :key="task.id">
          <task-card></task-card>
        </view>
      </view>
    </view> -->
    <!-- <view class="recommend-task-list">
      <view class="title">推荐打卡任务</view>
      <view class="task-list">
        <view
          class="list-item"
          v-for="task in recommoendTaskList"
          :key="task.id"
        >
          <task-card></task-card>
        </view>
      </view>
    </view> -->
    <button class="button-plain-purple" @tap="navigateToTaskList">添加推荐打卡任务</button>
  </view>
</template>
<script lang="ts">
import Taro from "@tarojs/taro";
import TaskCard from "../components/task-card.vue";
export default {
  components: {
    TaskCard
  },
  props: {
    healthCheckIn: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // requiredTaskList: [],
      // optionTaskList: [],
      // recommoendTaskList: []
    };
  },
  methods: {
    navigateToTaskList() {
      Taro.navigateTo({
        url: "/pages/tasks/list/index"
      });
    }
  },
  mounted() {
    // const mockTaskList = [];
    // for (let i = 0; i < 8; i++) {
    //   mockTaskList.push({
    //     id: i + 1,
    //     name: "晒早餐",
    //     img: ""
    //   });
    // }
    // this.requiredTaskList = mockTaskList;
    // this.optionTaskList = mockTaskList;
    // this.recommoendTaskList = mockTaskList;
  }
};
</script>
<style lang="less">
@import './index.less';
</style>
